<template>
    <div>
        <!-- 头部 -->
        <div class="header flex align-center justify-between">
            <router-link to="/my">
                <van-icon name="arrow-left" color="#a36663" size="22" />
            </router-link>
            <p class="fs-28 color-main">全部订单</p>
            <van-icon name="shopping-cart" color="#a36663" size="22" />
        </div>
        <div class="box">
            <img src="http://img.maixiaobu.cn/kissmilan/product/20210720/b1623da6f4f94189.jpg" alt="">
            <div class="flex justify-between">
                <ul>
                    <li>Litchi And Peach 荔枝桃桃</li>
                    <li>配送地点：<span>{{addressList[0].address}}</span></li>
                    <li>收货人：<span>{{addressList[0].name}}</span></li>
                    <li>收货人电话：<span>{{addressList[0].tel}}</span></li>
                </ul>
                <van-button color="#522725" size="small">立即支付</van-button>
            </div>
        </div>
        <!-- 底部菜单 -->
        <TabBar></TabBar>
    </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

let store = useStore()
let addressList = computed(()=>{
  return store.state.address.addressList
})
</script>

<style lang="less" scoped>
// 头部
.header {
    height: 9.8rem;
    background-color: #fff;
    padding: 0 2.1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
    box-shadow: 0 -2px 10px #ccc;
}

.box {
    margin-top: 9.8rem;
    height: 47rem;
    box-shadow: 0 1px 2px rgb(34 34 34 / 15%), 0 2px 2px rgb(34 34 34 / 24%);
    padding: 4% 3%;
    img{
        width: 10rem;
        height: 10rem;
        margin-bottom: 3.8rem;
    }
    ul{
        width: 75%;
    }
    li{
        line-height: 6rem;
        color: #a36663;
        font-size: 2.6rem;
    }
}
</style>